<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>文章详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="/static/img/logo.jpg">
    <!--css部分-->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/lib/editormd/css/editormd.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/layui/css/template.css}"/>
    <link rel="stylesheet" th:href="@{/static/layui/css/admin.css}"/>
    <!--    js部分-->
    <script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
    <script th:src="@{/static/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/static/lib/editormd/lib/flowchart.min.js}"></script>
    <script th:src="@{/static/lib/editormd/lib/jquery.flowchart.min.js}"></script>
    <script th:src="@{/static/lib/editormd/lib/marked.min.js}"></script>
    <script th:src="@{/static/lib/editormd/lib/prettify.min.js}"></script>
    <script th:src="@{/static/lib/editormd/lib/raphael.min.js}"></script>
    <script th:src="@{/static/lib/editormd/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/static/lib/editormd/lib/underscore.min.js}"></script>
    <script th:src="@{/static/lib/editormd/editormd.min.js}"></script>
    <style>
        .article-img {
            width: 16px;
            height: 16px;
            vertical-align: -3px;
            margin: 0 -1px 0 0;
            border: 0;
            outline: none
        }

        .time {
            color: #999aaa;
            font-family: "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            font-size: 14px;
            margin: 0 12px 0 0;
        }

        .time1 {
            color: #555666;
            font-family: "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            font-size: 14px;
            margin: 0 20px 0 0;
        }

        .font {
            font-family: "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            font-size: 12px;
            float: right;
            margin: -54px 0 0 0;
        }

        body .layui-colla-icon {
            display: none;
        }

        body .markdown-body a:hover {
            cursor: pointer;
            color: darkorange;
            text-decoration: none;
        }

        .colla-content {
            padding: 1px 10px;
        }

        .label {
            display: inline-block;
            color: #999aaa;
            font-size: 14px;
            line-height: 24px;
            margin: 0 8px 4px 42px;
        }

        .tag {
            color: #5094D5;
            margin: 0 8px 0 0;
            padding: 3px 6px;
            font-size: 2px;
            background: #FFFFFF;
            border: 1px solid #eaeaef;
        }
    </style>
</head>
<body style="background-image: linear-gradient(500rad,#a8edea,#fed6e3)">
<div>
    <ul class="layui-nav">
        <li class="layui-nav-item"><a th:href="@{/index}">首页</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">文章分类</a>
        </li>
        <li class="layui-nav-item"><a href="">标签</a></li>
        <li class="layui-nav-item"><a href="">文章归档</a></li>
        <li class="layui-nav-item"><a href="">日志</a></li>
        <li class="layui-nav-item"><a href="">留言板</a></li>
        <li class="layui-nav-item layui-col-sm-offset2"><a href="writeArticle.html" class="layui-icon layui-icon-edit">&nbsp;写文章</a>
        <li class="layui-nav-item layui-col-sm-offset4"><a href="">登录</a></li>
        <li class="layui-nav-item "><a href="">注册</a></li>
    </ul>
</div>

<div class="layui-fluid layadmin-homepage-fluid">
    <div class="layui-row ">
        <div class="layui-col-md2 ">
            <div class="layadmin-homepage-panel layadmin-homepage-shadow">
                <div class="layui-card text-center">
                    <div class="layui-card-body">
                        <div class="layadmin-homepage-pad-ver">
                            <img class="layadmin-homepage-pad-img"
                                 th:src="@{/usr/do/{aId}(aId=${article.authorId})}" width="96" height="96">
                        </div>
                        <h4 class="layadmin-homepage-font">[[${article.author}]]</h4>
                        <p class="layadmin-homepage-min-font">[[${article.status}]]</p>
                        <div class="layadmin-homepage-pad-ver">
                            <a href="javascript:;" class="layui-icon layui-icon-cellphone"></a>
                            <a href="javascript:;" class="layui-icon layui-icon-vercode"></a>
                            <a href="javascript:;" class="layui-icon layui-icon-login-wechat"></a>
                            <a href="javascript:;" class="layui-icon layui-icon-login-qq"></a>
                        </div>
                        <button class="layui-btn layui-btn-fluid">跟随</button>
                    </div>
                </div>
                <p class="layadmin-homepage-about">
                    关于我
                </p>
                <ul class="layadmin-homepage-list-group">
                    <li class="list-group-item"><i class="layui-icon layui-icon-location"></i>中国上海</li>
                    <li class="list-group-item"><a href="javascript:;" class="color"><i
                            class="layui-icon layui-icon-snowflake"></i><span style="word-wrap:break-word;">https://weibo.com/hu_ge</span></a>
                    </li>
                </ul>
                <div class="layadmin-homepage-pad-hor">
                    <mdall>
                        胡歌喜欢摄影，也喜欢写字，他视角独特，充满着奇思妙想。他有着极丰富的情感，和对生活的热情，他能点燃观众心中爱的火焰；胡歌积极、乐观、坚强，他脚踏实地地做好每一件事，真诚地对待身边每一个人
                    </mdall>
                </div>
                <p class="layadmin-homepage-about">
                    技能
                </p>
                <ul class="layadmin-homepage-list-inline">
                    <a href="javascript:;" class="layui-btn layui-btn-primary">演员</a>
                    <a href="javascript:;" class="layui-btn layui-btn-primary">主持人</a>
                    <a href="javascript:;" class="layui-btn layui-btn-primary">摄影师</a>
                    <a href="javascript:;" class="layui-btn layui-btn-primary">导演</a>
                    <a href="javascript:;" class="layui-btn layui-btn-primary">公共人物</a>
                </ul>
            </div>
        </div>

        <!--正文部分-->
        <div id="doc-content" style="width: 70%;margin-left: 25px;float: left">
            <fieldset class="layui-elem-field layui-field-title" style="margin: 10px 0 5px;border-width: 0">
                <h1>[[${article.title}]]</h1>
            </fieldset>
            <blockquote class="layui-elem-quote" style="border-left: 0 solid #ddd;padding-left: 0">
                <img th:src="@{/static/img/original.png}" th:alt="原创"
                     style="width: 36px;height: 32px;margin-right: 5px">
                <span class="time1">码农翻身</span>
                <img th:src="@{/static/img/newCurrentTime2.png}" th:alt="发布时间"
                     class="article-img">
                <span class="time">于 [[${article.createDate}]] 发布</span>
                <img th:src="@{/static/img/articleReadEyes2.png}" th:alt="浏览量"
                     class="article-img">
                <span class="time">[[${article.viewCounts}]]</span>
                <a href="javascript:;">
                    <img th:src="@{/static/img/tobarCollect2.png}" th:alt="收藏量"
                         class="article-img">
                    <span class="time">收藏&nbsp;3</span>
                </a>
                <div>
                    <span class="label" th:text="${#lists.isEmpty(article.tags)?'':'文章标签： '}"></span>
                    <span>
                <span class="tag" th:each="tag:${article.tags}" th:id="${tag.id}" th:text="${tag.tagName}">
                    大数据
                </span>
            </span>
                </div>
                <div class="layui-collapse" lay-accordion="" style="border-style: none">
                    <div class="layui-colla-item">
                        <span class="layui-colla-title font"><a href="javascript:;">版权</a></span>
                        <div class="layui-colla-content colla-content layui-anim layui-anim-downbit layui-anim-fadein layui-anim-scale">
                            <p class="layui-anim layui-anim-fadein">
                            <div style="margin-bottom: 3px">转载请联系原作者授权，微信<a
                                    href="javascript:;">[[${article.author}]]</a></div>
                            <div>本文链接:<a href="javascript:;">[[${#httpServletRequest.requestURL}]]</a>
                            </div>
                            </p>
                        </div>
                    </div>
                </div>
            </blockquote>
            <textarea style="display:none;">
                [[${article.summary}]]
            </textarea>
        </div>
    </div>
</div>


<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true,
        });

    });
    layui.use(['dropdown', 'util', 'layer', 'code'], function () {

        var element = layui.element;
        var layer = layui.layer;
        layui.code();
        //监听折叠
        element.on('collapse(test)', function (data) {
            layer.msg('展开状态：' + data.show);
        });
    });
</script>
</body>
</html>